.filterList {
  li {
    .boxSizing;
    display: block;
    padding: .5em;
    width: 100%;
    &:nth-child(odd) {
      background-color: lighten(@colorMain, 45);
    }
    a {
      .boxSizing;
      display: block;
      padding: .5em;
      width: 100%;
    }
    .title {
      font-size: 1.25em;
    }
  }
}

.newsList {
  li {
    display: block;
    float: left;
    position: relative;
    margin-right: 1%;
    margin-bottom: 1em;
    width: 49%;
    &:nth-child(0n+4) {
      margin-right: 0;
    }
    img{
      float: left;
      width: 30%;
      margin-right: 1%;
    }
    .news{
      float: left;
      width: 68%;
    }
  }
}

.grid {
  .clearfix;
  li {
    display: block;
    float: left;
    position: relative;
    margin-right: 1%;
    margin-bottom: 1em;
    &.cols-4 {
      width: 24%;
      &:nth-child(0n+4) {
        margin-right: 0;
      }
    }
    &.cols-10 {
      width: 10%;
      &:nth-child(0n+10) {
        margin-right: 0;
      }
    }
    &.cols-20 {
      width: 5%;
      &:nth-child(0n+20) {
        margin-right: 0;
      }
    }
    .info {
      .boxSizing;
      padding: 1rem;
      position: absolute;
      top: 0;
      text-decoration: none;
      z-index: 1;
      .flag {
        margin-left: -1rem;
      }
      .date {
        color: #FFF;
      }
    }
    .title {
      .boxSizing;
      color: #FFF;
      font-size: 2.5em;
      margin-bottom: 1rem;
      padding: 0;
      .textShadow(@x:.125rem,@y:0,@blur: .35rem);
    }
    .label {
      margin-top: -.5rem;
      padding: .5em;
      .dropShadow(@x: .125em, @y: .125em);
      .transform(rotate(-10deg));
      &.action {
        background-color: @colorAction;
        color: #000;
      }
      &.interaction {
        background-color: @colorInteraction;
        color: #FFF;
      }
      &.interactionAlt {
        background-color: @colorInteractionAlt;
        color: #000;
      }
    }
  }
}